<!DOCTYPE html>
<html lang="zh" data-layout-decorate="~{layout/default}">
<head>
    <title>TodoList</title>
    <link href="/webjars/materializecss/0.96.0/css/materialize.css" type="text/css" rel="stylesheet"
          media="screen,projection"/>
</head>

<body>
<div class="row" data-layout-fragment="content">
    <h4 class="indigo-text center">Todolist Detail
        <a class="btn-floating btn-large waves-effect waves-light indigo" data-th-if="${#lists.size(list)>0}"
           data-th-href="@{/web/v1/user/todo/add}">
            +
        </a>
    </h4>


    <div class="row">
        <div class="center" data-th-if="${#lists.isEmpty(list)}">
            So great! Add a new Todo first <br/>
            <a class="btn-floating btn-large waves-effect waves-light indigo" data-th-href="@{/web/v1/user/todo/add}">
                +
            </a>
        </div>

        <table class="table table-striped table-hover" data-th-if="${#lists.size(list)>0}">
            <thead>
            <tr>
                <th>ID</th>
                <th>CategoryId</th>
                <th>Weight</th>
                <th>Digest</th>
                <th>Content</th>
                <th>Progress</th>
                <th>CreateTime</th>
                <th style="text-align: center" colspan="3">Operate</th>
            </tr>
            </thead>
            <tbody>
            <tr data-th-each="item:${list}">
                <th data-th-text="${item.id}">id</th>
                <td data-th-text="${item.categoryId}">categoryId</td>
                <td data-th-text="${item.weight}">weight</td>
                <td data-th-text="${item.digest}">digest</td>
                <td data-th-text="${item.content}">content</td>
                <td data-th-class="${item.finished}?' mdi-action-done green-text'"
                    data-th-text="${item.finished}?'DONE':'NEED TO DO' ">finished
                </td>
                <td data-th-text=" ${#dates.format(item.createTime,'yyyy/MM/dd HH:mm')}">createTime</td>
                <td><a data-th-if="!${item.finished}" class="doneTodo" data-th-id="${item.id}">
                    <i class="mdi-action-done">Done</i></a>
                </td>
                <td><a data-th-href="@{/web/v1/user/todo/{id}/modify(id=${item.id})}">
                    <i class="mdi-notification-system-update">Modify</i></a>
                </td>
                <td><a class="deleteTodo" data-th-id="${item.id}">
                    <i class="mdi-action-delete">Delete</i></a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>

</div>

<script data-layout-fragment="script">
    $(function () {
        $(".doneTodo").click(function () {

            var todoId = $(this).attr("id");
            console.log(todoId)
            $.ajax({
                    type: 'PUT',
                    url: "/api/v1/user/todo/" + todoId,
                    data: {
                        _csrf: $('meta[name=_csrf]').attr('content') //csrf
                    },
                    success: function () {
                        window.location.href = "/web/v1/user/todo?finished=false";
                    }
                }
            );

        })


        $(".deleteTodo").click(function () {
            var todoId = $(this).attr("id");
            console.log(todoId)
            $.ajax({
                    type: 'DELETE',
                    url: "/api/v1/user/todo/" + todoId,
                    data: {
                        _csrf: $('meta[name=_csrf]').attr('content') //csrf
                    },
                    success: function () {
                        window.location.href = "/web/v1/user/todo?finished=false";
                    }
                }
            );

        })


    });
</script>

</body>
</html>